<template>
	<view class="content">
		<view class="login-styless">
			<view class="title">用户注册</view>
			<view>
				<u-form :model="form" ref="uForm">
					<view class="form-style-title">手机号码</view>
					<u-form-item left-icon="phone" :border-bottom="false" prop="mobile">
						<view class="input-style">
							<u-input v-model="form.mobile" placeholder="请输入手机号" />
						</view>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" ref="uCode"
								@change="codeChange"></u-verification-code>
							<u-button @tap="getCode" class="btn" ripple-bg-color="#00B2E5" :ripple="true">{{tips}}
							</u-button>
							<!-- <view class="btn" @tap="getCode">获取验证码</view> -->
						</view>
					</u-form-item>
					<view class="form-style-title">验证码</view>
					<u-form-item left-icon="lock-open" :border-bottom="false">
						<view class="input-style">
							<u-input v-model="form.code" placeholder="请输入短信验证码" />
						</view>
					</u-form-item>
					<view class="form-style-title">推荐人</view>
					<u-form-item left-icon="man-add" :border-bottom="false">
						<view>推荐人：{{rec_phone}}</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="yhxy">
				<view class="xk" @click.stop="ifxq = !ifxq">
					<u-icon name="checkbox-mark" size="20" v-if="ifxq" @click.stop="ifxq = !true"></u-icon>
				</view>
				<view style="margin-left: 10upx;text-decoration:underline;" @click="getlookxy">同意《注册服务协议》</view>
			</view>
			<!-- <view style="margin-left: 10upx;text-decoration:underline;text-align: center;">登录</view> -->
		</view>
		<view class="btn-bottom" @click="submit()">提交</view>
		<view style="margin-left: 10upx;text-decoration:underline;text-align: center;color: #ccc;" @click="gologin">登录</view>
		<!-- <view class="btn-bottom" @click="submit()">登录</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifxq: false,
				wxcode: '',
				form: {
					mobile: '',
					rec_phone: '',
					code: ''
				},
				tips: '',
				// refCode: null,
				seconds: 60,
				rules: {
					// 字段名称
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					rec_phone: [
						{
							required: true, 
							message: '请输入推荐人手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad(e) {
			this.rec_phone = this.geTel(e.phone)
			this.form.rec_phone = e.phone
		},
		onShow() {
			this.wxcode = this.getcode('code')
			if (!uni.getStorageSync('openid')) {
				this.getOpenid()
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getlookxy() {
				uni.navigateTo({
					url: '/pages/agreement/index'
				})
			},
			// 获取微信openid
			getOpenid () {
				var param = {
					code: this.wxcode
				}
				this.$request('', '/api/apiminiapp/login', 'POST', param, {}).then(res => {
					var openid = res.data.wechat_user.openid
					console.log(openid, '0000')
					uni.setStorageSync('openid', openid)
				})
			},
			geTel(tel) {
			 var reg = /^(\d{3})\d{4}(\d{4})$/;
				return tel.replace(reg, "$1****$2");
			},
			// 获取页面参数
			getcode(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			// 登录
			getlogin(){
				var param = {
					mobile: this.form.mobile,
					rec_phone: this.form.rec_phone,
					code: this.form.code,
					openid: uni.getStorageSync('openid')
				}
				this.$request('', '/api/user/register', 'POST', param, {}).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/login/index'
						})
					}, 2000);
				})
			},
			//获取验证码
			getloginCode(){
				var param = {
					mobile: this.form.mobile,
					event: 'register'
				}
				this.$request('', '/api/sms/send', 'POST', param, {}).then(res => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				})
			},
			submit() {
				if (this.ifxq !== true) {
					uni.showToast({
					    title: '必须先同意协议',
						icon: 'error',
					    duration: 2000
					});
					return
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.getlogin()
					} else {
						console.log('验证失败');
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.getloginCode()
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			gologin () {
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	.yhxy {
		display: flex;
		align-items: center;
		margin-top: 30upx;
		margin-bottom: 70upx;
	}

	.xk {
		width: 30upx;
		height: 30upx;
		border: 1px solid #333333;
		display: flex;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('../../static/bjtp.png');
		background-size: 100% 100%;
		height: 100vh;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.login-styless {
		width: 85%;
		/* height: 300upx; */
		margin: 0 auto;
		margin-top: 300upx;
		background-color: #ffffff;
		border-radius: 20upx;
		padding: 50upx;
		padding-bottom: 50upx;
	}

	.title {
		width: 100%;
		text-align: center;
		font-size: 40upx;
		font-weight: bold;
		color: #0000000;
	}

	.btn {
		/* width: 180upx; */
		height: 60upx;
		background-color: #00B2E5;
		border-radius: 50upx;
		line-height: 60upx;
		text-align: center;
		color: #ffffff;
		font-size: 25upx;
		margin-left: 10upx;
	}

	.wrap {
		margin-left: 10upx;
	}

	.input-style {
		width: 300upx;
		background-color: #F5FAFF;
	}

	.input-style-tjr {
		width: 380upx;
		background-color: #F5FAFF;
	}

	.form-style-title {
		color: #000;
		font-weight: 600;
		font-size: 25upx;
	}

	.btn-bottom {
		width: 370upx;
		height: 90upx;
		background: linear-gradient(to bottom, #FFD543, #FDA917);
		box-shadow: 1upx 2upx 7upx 0upx rgba(255, 255, 255, 0.66);
		border-radius: 50upx;
		color: #fff;
		line-height: 90upx;
		text-align: center;
		font-size: 40upx;
		font-weight: bold;
		position: relative;
		bottom: 40upx;
	}
</style>
